<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>animate</title>
  <style type="text/css">
    .pox, #box {
      width: 200px;
      height: 240px;
      background: #f0f;
      margin: 10px auto;
      opacity: 0.8;
      
    }
    body {
      overflow: hidden;
    }

  </style>
</head>
<body>
  
  <div id="box"></div>
  <div class="pox"></div>
  <div class="pox"></div>
  
  
  <script type="text/javascript" src="../queue/queue.js"></script>
  <script type="text/javascript" src="animate.js"></script>
  <script type="text/javascript">
      
      var box = document.getElementById('box');
      var pox = document.getElementsByTagName('div')
      var $ = Animate(pox);
      
      $.animate({
        width: 300,
        height: 300,
        opacity: 48
      },1000,function() {
        console.log('第一组完成')
      })
      .delay(1000)
      .animate({
        width: 200,
        height: 200,
        opacity:100
      },1000)
      .animate({
        width: 300,
        height: 200,
        opacity:70
      },1000,function() {
        console.log('三组全部完成')
      })
      


  </script>
</body>
</html>